<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        #list li{
            width:200px;
            height:50px;
            border:1px solid #000;
            line-height:50px;
            cursor:pointer;
        }

    </style>
</head>
<body>
    <h1>jq 事件</h1>
    <hr>
    
    <button id="btn">解绑事件</button>
    <button id="btn1">添加诗句</button>
    
    <hr>
    <ul id="list">
        <li>我是谁</li>
        <li>我在哪</li>
        <li>我在干什么</li>
        <li>你要干嘛</li>
    </ul>

    <script>
        $('#list li').click(function(){
            console.log($(this).html());
        });

        $('#list li').bind('click',function(){
            alert($(this).html());
        });

        // $('list li').click(function(){
        //     console.log($(this).html());
        // // });

        // 解绑一次时间
        $('h1').one('click',function (){
            alert('点击下载');
        });

        //解绑事件 unbind
        $('#btn').click(function(){
            $('#list li').unbind('mouseout');
        });

        $('#btn1').click(function(){
            $('<li>你在天上</li>').appendTo('#list');
        });

        $(document).on('mouseover','#list li',function(){
            $(this).css('background','#f90');
        }).on('mouseout','#list li',function(){
            $(this).css('background','#fff');
        });
        $('#btn').trigger('click');
        $('h1').trigger('click');

        
    </script>
</body>
</html>